<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
		<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
		<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
		<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
		 crossorigin="anonymous">
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
		 crossorigin="anonymous"> -->
		<link rel="stylesheet" type="text/css" href="../static/dist/css/bootstrap.css" />
	</head>
	<style type="text/css">
		body,
		html {
			background-color: #F8F8F8;
			height: 100%;
			padding: 0;
		}

		.search {
			padding-bottom: 20px;
		}

		.search .margin {
			margin: 10px;
		}

		.search .container {
			overflow: hidden;
			margin: 10px auto 10px;
			border-radius: 5px;
			background-color: #FFFFFF;
			padding: 0;
			text-align: center;
			box-shadow: 1px 3px 10px #DFF0D8;
		}

		.search .title {
			background-color: #FFFFFF;
			height: 40px;
			text-align: center;
		}

		.search .title span {
			float: left;
			line-height: 40px;
			margin-left: 15px;
		}

		.search .title h4 {
			height: 100%;
			margin: 0 29px 0 0;
			line-height: 45px;
			font-size: 16px;
		}

		.search .container .row {
			margin-top: 15px;
		}

		.search .container .date1 {
			margin: 0 -10px 0 10px;
		}

		.search .container .date2 {
			margin: 0 10px 0 -10px;
		}

		.search .container .span-icon {
			line-height: 35px;
			font-size: 20px;
			/* color: #008000; */
		}

		.search .container .input-group {
			margin: 10px 10px 15px;
		}

		.search .container .lt-date {
			margin: -15px 0 0;
			height: 35px;
			line-height: 35px;
			background-color: rgba(51, 122, 183, 0.2);
		}

		.search .container .col-xs-7 {
			text-align: left;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.search .container .col-xs-5 {
			text-align: right;
		}

		.search hr {
			margin: 8px 15px;
			padding: 1px;
		}

		.search .lt-msg {
			margin: 0;
		}


		.has-primary .input-group-addon {
			color: #337AB7;
			background-color: rgba(51, 122, 183, 0.1);
			border: solid 1px #337AB7;
			padding: 6px 12px 7px;
		}

		.has-primary .form-control {
			border: solid 1px #337AB7 !important;
		}

		#start,
		#end {
			padding: 6px 3px;
		}

		[v-cloak] {
			display: none;
		}
		/* 模态框 */
		.modal-content .modal-body{
			text-align: left;
			padding: 10px;
			max-height: 250px;
			overflow: scroll;
		}
		.modal-content .modal-footer{
			padding: 5px;
		}
		.modal-content .modal-header{
			padding: 10px;
		}
		.modal-content .modal-title{
			text-align: center;
		}
		/* 警告框 */
		.alert-danger{
			text-align: center;
			position: absolute;
			width: 100%;
			top: 0%;
			opacity: 0.95;
		}
	</style>
	<body>
		<div class="search">
			<div class="title">
				<span class="glyphicon glyphicon-chevron-left" @click="back"></span>
				<h4>到访列表记录查询</h4>
			</div>
			<div class="margin">
				<div class="container">
					<div class="has-primary">
						<div class="row">
							<div class="col-xs-5 date1">
								<input type="date" id="start" name="start" v-model="queryParams.start" class="form-control">
							</div>
							<div class="span-icon col-xs-2">
								<!-- <span class="glyphicon glyphicon-minus"></span> -->至
							</div>
							<div class="col-xs-5 date2">
								<input type="date" id="end" name="end" v-model="queryParams.end" class="form-control">
							</div>
						</div>
						<div class="input-group">
							<input type="search" id="searchInput" @keyup.enter="search" v-model="queryParams.keyword" class="form-control" placeholder="搜索...">
							<span class="input-group-btn">
								<button class="btn btn-primary" @click="search" type="button"><span class="glyphicon glyphicon-search"></span></button>
							</span>
						</div>
					</div>
				</div>
				
				<div class="container" style="padding: 15px 0;">
					<div class="lt-date row">
						<div class="col-xs-7">到访记录</div>
						<div class="col-xs-5">到访时间</div>
					</div>
					
					<div>
						<div v-cloak class="lt-msg row" v-if="show">无数据</div>
					</div>
					
					<div v-for="item in search_list" v-cloak @click="getVal(item.detail)">
						<div class="lt-msg row" data-toggle="modal" data-target=".bs-example-modal-sm">
							<span class="right col-xs-7">{{item.detail}}</span>
							<span class="left col-xs-5">{{item.date}}</span>
						</div>
						<hr>
					</div>
					<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
					  <div class="modal-dialog modal-sm" role="document">
					    <div class="modal-content">
							 <div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
								<h4 class="modal-title" id="myModalLabel">详细内容</h4>
							 </div>
							 <div class="modal-body">
								{{msg_index}}
							 </div>
					    </div>
					  </div>
					</div>

				</div>
			</div>
		</div>
		<div class="alert alert-danger alert-dismissable hide" role="alert">
			 <button type="button" class="close" data-dismiss="alert" aria-label="Close">          
				 <span aria-hidden="true">&times;</span>
			 </button>
			 <strong>普通管理员无法查看其他管理员的客户</strong>
		</div>
	</body>
	<script src="../static/js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../static/dist/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>

	<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
	<!-- <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script> -->
	<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> -->

	<script src="../static/js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script>
		var search_app = new Vue({
			el: ".search",
			data() {
				const getDate = function(days){
					let date = new Date()
					date.setDate(date.getDate() + days)
					let year = date.getFullYear()
					let month = date.getMonth() + 1
					if(month < 10) {
						month = "0" + month
					}
					let day = date.getDate()
					if(day < 10) {
						day = "0" + day
					}
					return year + "-" + month + "-" + day
				}
				return {
					msg_index: "",
					show: false,
					search_list:null,
					userId: '',
					queryParams: {
						start: getDate(-7),
						end: getDate(0),
						keyword: ''
					}
				}
			},
			created() {
				this.userId = this.getUrlParam("userId")
				this.search()
			},
			methods: {
				getVal(msg) {
					this.$data.msg_index = msg
				},
				back() {
					window.location.href = "./customer.html?userId=" + this.userId + "&state=1"
				},
				getUrlParam(name) {
					var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)")
					var r = window.location.search.substr(1).match(reg)
					if (r != null) return decodeURI(r[2]); return null
				},
				search() {
					$.ajax({
						type: 'GET',
						url: "/face/wechat/wxSearch/"+ this.userId ,
						data: this.queryParams,
						success: function(resp) {
							if (typeof("sdsd") == typeof(resp)) {
								var resp = eval('(' + resp + ')')
							}
							if (resp.code == "302") {
								console.log(resp)
								window.location.href =
									"https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx5acca64b07361a8c&redirect_uri=http%3A%2F%2Ftest.aimendian.cn%2Fface%2Fgrant&response_type=code&scope=snsapi_base&state=123#wechat_redirect";
							} else if (resp.code == 503 || resp.data == "" || resp.data == null){
								search_app.$data.show = true
								console.log("无数据")
							}else if(resp.code == 502){
								$('.alert-danger').removeClass('hide').addClass('in')
								setTimeout(function(){
									$('.alert-danger').removeClass('in').addClass('hide')
								},2000)
								console.log(resp)
							}
							if(resp.data.length<=0){
								search_app.$data.show = true
							}else{
								search_app.$data.show = false
							}
							search_app.search_list = resp.data
						},
						error: function(error) {
							console.log(error)
						}
					})
				}
			},
		})
	</script>
</html>
